import Link from 'next/link';
import { FiCalendar, FiCheck, FiBarChart2, FiClock } from 'react-icons/fi';

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen">
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
          <h1 className="text-2xl font-bold text-blue-600">每日计划</h1>
          <div className="space-x-4">
            <Link 
              href="/auth/login" 
              className="inline-flex items-center justify-center rounded-md bg-gray-100 px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-200"
            >
              登录
            </Link>
            <Link 
              href="/auth/register" 
              className="inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
            >
              注册
            </Link>
          </div>
        </div>
      </header>

      <main className="flex-grow">
        {/* 英雄区域 */}
        <div className="relative bg-gradient-to-r from-blue-500 to-blue-700 py-16 sm:py-24">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 text-center md:text-left text-white">
              <h2 className="text-3xl sm:text-4xl font-extrabold mb-4">
                坚持每一天，成就更好的自己
              </h2>
              <p className="text-xl mb-6">
                轻松创建计划，按时打卡，跟踪进度，养成良好习惯
              </p>
              <Link 
                href="/auth/register" 
                className="inline-flex items-center justify-center rounded-md bg-white px-6 py-3 text-base font-medium text-blue-600 hover:bg-blue-50"
              >
                开始使用
              </Link>
            </div>
            <div className="md:w-1/2 mt-10 md:mt-0 flex justify-center">
              <div className="w-full max-w-md bg-white rounded-lg shadow-xl overflow-hidden">
                <div className="p-6">
                  <div className="flex items-center justify-between mb-6">
                    <h3 className="text-lg font-semibold">早起晨跑计划</h3>
                    <span className="text-sm text-gray-500">进度: 57%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5 mb-6">
                    <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: '57%' }}></div>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center text-sm">
                      <FiCalendar className="mr-2 text-blue-500" />
                      <span>开始: 2023年5月1日</span>
                    </div>
                    <div className="flex items-center text-sm">
                      <FiCheck className="mr-2 text-green-500" />
                      <span>已坚持: 17 天</span>
                    </div>
                    <div className="p-3 bg-gray-50 rounded mt-4">
                      <p className="text-sm text-gray-600">今天跑了5公里，感觉很好！💪</p>
                      <div className="mt-2">
                        <div className="w-full h-24 bg-gray-200 rounded flex items-center justify-center text-gray-400">
                          [打卡照片]
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 功能区域 */}
        <div className="py-16 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-gray-900">主要功能</h2>
              <p className="mt-4 text-lg text-gray-600">
                我们提供全面的工具，帮助您轻松管理每日计划
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <div className="p-6 bg-blue-50 rounded-lg">
                <div className="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-lg mb-4">
                  <FiCalendar className="h-6 w-6 text-blue-600" />
                </div>
                <h3 className="text-xl font-medium text-gray-900 mb-2">创建计划</h3>
                <p className="text-gray-600">
                  设置开始和结束时间，创建个性化的每日计划
                </p>
              </div>

              <div className="p-6 bg-green-50 rounded-lg">
                <div className="w-12 h-12 flex items-center justify-center bg-green-100 rounded-lg mb-4">
                  <FiCheck className="h-6 w-6 text-green-600" />
                </div>
                <h3 className="text-xl font-medium text-gray-900 mb-2">按时打卡</h3>
                <p className="text-gray-600">
                  添加备注和照片，记录每天的完成情况
                </p>
              </div>

              <div className="p-6 bg-purple-50 rounded-lg">
                <div className="w-12 h-12 flex items-center justify-center bg-purple-100 rounded-lg mb-4">
                  <FiBarChart2 className="h-6 w-6 text-purple-600" />
                </div>
                <h3 className="text-xl font-medium text-gray-900 mb-2">数据统计</h3>
                <p className="text-gray-600">
                  通过图表直观展示完成情况，跟踪您的进度
                </p>
              </div>

              <div className="p-6 bg-yellow-50 rounded-lg">
                <div className="w-12 h-12 flex items-center justify-center bg-yellow-100 rounded-lg mb-4">
                  <FiClock className="h-6 w-6 text-yellow-600" />
                </div>
                <h3 className="text-xl font-medium text-gray-900 mb-2">养成习惯</h3>
                <p className="text-gray-600">
                  帮助您坚持不懈，养成良好习惯，提高自律能力
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer className="bg-gray-800 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-6 md:mb-0">
              <h2 className="text-xl font-bold">每日计划</h2>
              <p className="mt-2 text-gray-300">坚持每一天，成就更好的自己</p>
            </div>
            <div className="flex space-x-6">
              <Link href="/auth/login" className="text-gray-300 hover:text-white">
                登录
              </Link>
              <Link href="/auth/register" className="text-gray-300 hover:text-white">
                注册
              </Link>
            </div>
          </div>
          <div className="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400 text-sm">
            &copy; 2024 每日计划 保留所有权利
          </div>
        </div>
      </footer>
    </div>
  );
}
